<template>
    <el-container class="content-wrapp">
        <el-aside name="left" style="width: 250px">
            <UserLeftSelect ref="userLeftSelect" @sendUserIds="getUserIds"></UserLeftSelect>
        </el-aside>

        <el-main name="main">
            <el-dialog
                title="新增产品"
                :visible.sync="addProductSub"
                width="380px"
                @open="initAddProductInfo"
                @close="clearAddProductInfo"
            >
                <el-form label-width="100px" :model="form" enctype="multipart/form-data">
                    <!-- <input v-model="form.sellerSkuId" hidden/>
           <input v-model="form.countryId" hidden/>
           <input v-model="form.sellerId" hidden/>
                    -->
                    <el-form-item label="国家">
                        <el-select
                            placeholder="请选择国家"
                            filterable
                            v-model="form.countryId"
                            @change="form_chooseCountry()"
                        >
                            <el-option
                                v-for="country in formCountryList"
                                :label="country.countryName"
                                :key="country.countryId"
                                :value="country.countryId"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品系列">
                        <el-select
                            placeholder="请选择产品系列"
                            filterable
                            v-model="form.productCategory"
                            @change="form_chooseProductCategory()"
                        >
                            <el-option
                                v-for="productCategory in formProductCategoryList"
                                :key="productCategory.productCategoryId"
                                :value="productCategory.productCategoryId"
                                :label="productCategory.productCategory"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品型号">
                        <el-select
                            placeholder="请选择产品型号"
                            filterable
                            clearable
                            v-model="form.productModelNumber"
                            @change="form_chooseProductModelNumber()"
                        >
                            <el-option
                                v-for="product in formProductModelNumberList"
                                :key="product.productId"
                                :value="product.productModelNumber"
                                :label="product.productModelNumber"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="ASIN">
                        <el-select
                            placeholder="请选择ASIN"
                            filterable
                            clearable
                            v-model="form.asinId"
                            @change="form_chooseAsin()"
                        >
                            <el-option
                                v-for="asin in formAsinList"
                                :key="asin.asinId"
                                :value="asin.asinId"
                                :label="asin.asin"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addProductSub = false">取 消</el-button>
                    <el-button type="primary" @click="submitProductSub">确 定</el-button>
                </div>
            </el-dialog>

            <!--搜索编码信息-->
            <el-form :model="searchInfo" label-width="80px">
                <el-form-item label="产品系列">
                    <category
                        ref="category"
                        :form="searchInfo"
                        formId="productCategory"
                        @selectAll="Category"
                        @selectDel="Category"
                        addSize="mini"
                        size="small"
                    ></category>
                </el-form-item>
                <el-form-item label="产品型号">
                    <product
                        ref="product"
                        formId="productModelNumber"
                        formCategory="productCategory"
                        :form="searchInfo"
                        @selectAll="Product"
                        @selectDel="Product"
                        addSize="mini"
                        size="small"
                    ></product>
                </el-form-item>
                <el-form-item label="ASIN">
                    <ASIN
                        ref="ASIN"
                        formId="asinId"
                        formCategory="productCategory"
                        formProduct="productModelNumber"
                        :form="searchInfo"
                        @selectAll="ASIN"
                        @selectDel="ASIN"
                        addSize="mini"
                        size="small"
                    ></ASIN>
                </el-form-item>
                <el-form-item label-width="15px">
                    <el-button @click="search" type="primary" icon="el-icon-search" size="small">搜索</el-button>
                    <download
                        :tHeader="tHeader"
                        :tableData="userChargeList"
                        :excelName="excelName"
                        :filterVal="filterVal"
                        size="small"
                    ></download>
                    <el-button
                        @click="addProductSub = true"
                        type="success"
                        icon="el-icon-plus"
                        size="small"
                    >新增产品</el-button>
                </el-form-item>
            </el-form>

            <el-table
                ref="table"
                name="showTable"
                border="border"
                style="width: 100%"
                :data="userChargeList"
                :header-cell-style="getRowClass"
                @cell-click="deleteUserCharge"
            >
                <el-table-column prop="businessUnit" label="BU" width="160px"></el-table-column>
                <el-table-column prop="productCategory" label="产品系列" width="160px"></el-table-column>
                <el-table-column prop="countryName" label="国家" width="260px">
                    <template slot="header" slot-scope="scope">
                        <el-select
                            placeholder="请选择国家"
                            multiple
                            collapse-tags
                            size="mini"
                            v-model="tableHeadCountry"
                            @change="chooseCountry"
                        >
                            <el-option
                                v-for="country in countryList"
                                :key="country.countryId"
                                :value="country.countryId"
                                :label="country.countryName"
                            ></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="userName" label="负责人" width="160px"></el-table-column>
                <el-table-column prop="departmentName" label="运营组别"></el-table-column>
                <el-table-column prop="productModelNumber" label="产品型号">
                    <template slot-scope="scope">
                        <el-link
                            :href="'#/productCenter/productBasicInfo?model='+ scope.row.productModelNumber"
                        >{{scope.row.productModelNumber}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="asin" label="ASIN">
                    <template slot-scope="scope">
                        <el-link
                            :href="'#/productCenter/productBasicInfo?asin='+ scope.row.asin"
                        >{{scope.row.asin}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="80px">
                    <template -scope="scope">
                        <el-button size="mini" type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <scrollTable ref="scrollTable"></scrollTable>
        </el-main>
    </el-container>

    <!--<div class="userData">


    </div>-->
</template>

<script>
import category from "components/searchfor/category.vue";
import product from "components/searchfor/product.vue";
import ASIN from "components/searchfor/ASIN.vue";
import scrollTable from "components/scroll/scroll-table.vue";
export default {
    name: "UserData",
    components: {
        download: resolve =>
            require(["components/xlsx/download-xlsx.vue"], resolve),
        UserLeftSelect: resolve => require(["./UserLeftSelect.vue"], resolve),
        category,
        product,
        ASIN,
        scrollTable
    },
    data() {
        return {
            tableHeadCountry: [],
            form: {
                productCategory: "",
                productModelNumber: "",
                asinId: "",
                countryId: ""
            },
            searchInfo: {
                productCategory: "",
                productModelNumber: "",
                asinId: "",
                userCharge: 1
            },
            addProductSub: false,
            userChargeList: [], //展示list
            productCategoryList: [],
            productList: [],
            asinList: [],
            tHeader: [
                //导出excel表头
                "BU",
                "产品系列",
                "国家",
                "负责人",
                "运营组别",
                "产品型号",
                "ASIN"
            ],
            filterVal: [
                //导出excel表头属性名
                "businessUnit",
                "productCategory",
                "countryName",
                "userName",
                "departmentName",
                "productModelNumber",
                "asin"
            ],
            excelName: "人员对照表", //导出的excel名称
            countryList: [],
            formCountryList: [],
            formProductCategoryList: [],
            formProductModelNumberList: [],
            formAsinList: [],
            productModelNumber:[]
        };
    },
    created() {
        this.init();
    },
    mounted(){
        this.$refs.scrollTable.scrollShow(this.$refs.table);
    },
    methods: {
        init() {
            this.initProductCategorys();
            this.initModelNumber();
            this.initAsin();
            this.initCountry();
            this.search();
        },
        Category() {
            this.$refs.product.getProduct();
            this.$refs.ASIN.getASIN();
        },
        Product(val) {
            this.productModelNumber = val;
            this.$refs.ASIN.getASIN();
        },
        ASIN(){

        },
        initProductCategorys() {
            var url =
                this.GLOBAL.productService +
                "/productSubscription/findProductCategoryAll";
            this.$ajax.get(url, {}).then(res => {
                if (res.data.code == "200") {
                    var data = res.data.data;
                    this.productCategoryList = data;
                }
            });
        },
        initModelNumber() {
            //所有产品型号
            var url =
                this.GLOBAL.productService +
                "/productSubscription/findModelNumberAll";
            this.$ajax.get(url, {}).then(res => {
                if (res.data.code == "200") {
                    var data = res.data.data;
                    this.productList = data;
                }
            });
        },
        initAsin() {
            //所有Asin
            var url =
                this.GLOBAL.productService + "/productSubscription/findAsinAll";
            this.$ajax.get(url, {}).then(res => {
                if (res.data.code == "200") {
                    this.asinList = [];
                    this.asinList = res.data.data;
                }
            });
        },
        initCountry() {
            //所有Asin
            var url =
                this.GLOBAL.productService + "/findProductCharge/findCountry";
            this.$ajax.get(url, {}).then(res => {
                if (res.data.code == "200") {
                    this.countryList = res.data.data;
                }
            });
        },
        chooseProductCategory() {
            var productCategoryId = this.searchInfo.productCategory;

            //清空 产品型号
            var url =
                this.GLOBAL.productService +
                "/productSubscription/findModelNumberByproductCategoryId/" +
                productCategoryId;
            //var url =  this.GLOBAL.productService + "productSubscription/findUserChargeByDeptId/" + deptId
            this.$ajax
                .get(url, {})
                .then(res => {
                    if (res.data.code == "200") {
                        //清空负责人
                        this.productList = [];
                        this.productList = res.data.data;
                    }
                })
                .then(error => {});

            //清空 Asin
            var url1 =
                this.GLOBAL.productService +
                "/productSubscription/findAsinByproductCategoryId/" +
                productCategoryId;
            //var url =  this.GLOBAL.productService + "productSubscription/findUserChargeByDeptId/" + deptId
            this.$ajax
                .get(url1, {})
                .then(res => {
                    if (res.data.code == "200") {
                        //清空 Asin
                        this.asinList = [];
                        this.asinList = res.data.data;
                    }
                })
                .then(error => {});
        },
        chooseProductModelNumber() {
            var productModelNumber = this.searchInfo.productModelNumber;

            var url =
                this.GLOBAL.productService +
                "/productSubscription/findAsinByproductModelNumber/" +
                productModelNumber;

            this.$ajax
                .get(url, {})
                .then(res => {
                    if (res.data.code == "200") {
                        //清空 Asin
                        this.asinList = [];
                        this.asinList = res.data.data;
                    }
                })
                .then(error => {});
        },
        chooseAsin() {
            var asinId = this.searchInfo.asinId;

            var url =
                this.GLOBAL.productService +
                "/productSubscription/findProductInByAsin/" +
                asinId;

            this.$ajax
                .get(url, {})
                .then(res => {
                    if (res.data.code == "200") {
                        if (res.data.data != null) {
                            this.form = [];
                            this.form = res.data.data;
                        }
                        //清空 Asin
                        // this.asinList = []
                        // this.asinList = res.data.data
                    }
                })
                .then(error => {});
        },
        chooseCountry() {
            var url =
                this.GLOBAL.productService +
                "/productSubscription/findProductSubscriptionList";
            this.requerstSearch(url);
        },
        search() {
            var url =
                this.GLOBAL.productService +
                "/productSubscription/findProductSubscriptionList";

            //初始化 子组件 下拉列表的位置
            //   this.$refs.userLeftSelect.initInputSelectAndShowInput()

            this.requerstSearch(url);
        },
        requerstSearch(url) {
            let modelNumber = this.productModelNumber.find(
                item => item.productId === this.searchInfo.productModelNumber
            );
            var data = {
                userCharge: this.searchInfo.userCharge,
                productCategory: this.searchInfo.productCategory,
                productModelNumber : modelNumber
                    ? modelNumber.productModelNumber
                    : "",
                asinId: this.searchInfo.asinId,
                countryIds: this.tableHeadCountry
            };

            this.$ajax({
                method: "post",
                url: url,
                data: data
            })
                .then(res => {
                    if (res.data.code == "200") {
                        this.userChargeList = res.data.data.data;
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        submitProductSub() {
            var userIds = this.searchInfo.userCharge;
            if (userIds == null || userIds.length <= 0) {
                this.$message.error("请先选中对应人员,在进行添加操作");
                return;
            }

            if (this.form.countryId == null || this.form.countryId == "") {
                this.$message.error("请选择国家");
                return;
            }
            if (
                this.form.productCategory == null ||
                this.form.productCategory == ""
            ) {
                this.$message.error("请选择产品系列");
                return;
            }
            if (
                this.form.productModelNumber == null ||
                this.form.productModelNumber == ""
            ) {
                this.$message.error("请选择产品型号");
                return;
            }
            if (this.form.asinId == null || this.form.asinId == "") {
                this.$message.error("请选择asin");
                return;
            }

            var data = {
                productCategoryId: this.form.productCategory,
                productModelNumber: this.form.productModelNumber,
                asinId: this.form.asinId,
                countryId: this.form.countryId,
                userId: this.searchInfo.userCharge
            };

            var url =
                this.GLOBAL.productService +
                "/productSubscriptionUserRel/addProductByUserCharge";

            this.$ajax({
                method: "post",
                url: url,
                data: data
            })
                .then(res => {
                    if (res.data.code == "200") {
                        this.userChargeList = res.data.data;
                        //初始化 子组件 初始化
                        this.$refs.userLeftSelect.init();
                        this.$message(res.data.msg);
                    } else if (res.data.code == "500") {
                        this.$message(res.data.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });

            //关闭弹窗
            this.addProductSub = false;
        },
        deleteUserCharge(row, cell) {
            if (cell.label === "操作") {
                this.$confirm("确定删除负责人？", "提示", {
                    confirmButtonText: "确定删除负责人",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    var unionIds = row.unionId;
                    var userCharge = row.userName;
                    if (userCharge == null || userCharge == "") {
                        this.$message.error("不存在负责人,不能删除负责人!");
                    }

                    var url =
                        this.GLOBAL.productService +
                        "/productSubscriptionUserRel/deleteUserChargeByUnionId";
                    //删除操作
                    this.$ajax({
                        method: "get",
                        url: url,
                        params: {
                            unionIds
                        }
                    })
                        .then(res => {
                            if (res.data.code == "200") {
                                this.userChargeList = res.data.data;
                            } else if (res.data.code == "500") {
                                this.$message.error(res.data.msg);
                            }
                        })
                        .catch(error => {
                            console.log(error);
                        });
                });
            }
        },
        //获取选中的用户id
        getUserIds(data) {
            this.searchInfo.userCharge = data;
            this.search();
        },
        getProductSubscriptionCountrys() {
            //获取产品订阅 相关的所有国家
            var url =
                this.GLOBAL.productService +
                "/productSubscriptionUserRel/getProductSubscriptionCountrys";
            this.$ajax
                .get(url)
                .then(res => {
                    if (res.data.code == "200") {
                        this.formCountryList = res.data.data;
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getProductSubscriptionProductCategorys() {
            //获取 user_product_amz_asin_rel 表下 所有产品系列
            var url =
                this.GLOBAL.productService +
                "/productSubscriptionUserRel/getProductSubscriptionProductCategorys";
            this.$ajax.get(url, {}).then(res => {
                if (res.data.code == "200") {
                    var data = res.data.data;
                    this.formProductCategoryList = data;
                }
            });
        },
        getProductSubscriptionProductModelNumbers() {
            //获取 user_product_amz_asin_rel 表下 所有产品型号
            var url =
                this.GLOBAL.productService +
                "/productSubscriptionUserRel/getProductSubscriptionProductModelNumbers";
            this.$ajax.get(url, {}).then(res => {
                if (res.data.code == "200") {
                    var data = res.data.data;
                    this.formProductModelNumberList = data;
                }
            });
        },
        getProductSubscriptionAsins() {
            //获取 user_product_amz_asin_rel 表下 所有Asin
            var url =
                this.GLOBAL.productService +
                "/productSubscriptionUserRel/getProductSubscriptionAsins";
            this.$ajax.get(url, {}).then(res => {
                if (res.data.code == "200") {
                    var data = res.data.data;
                    this.formAsinList = data;
                }
            });
        },
        initAddProductInfo() {
            this.getProductSubscriptionCountrys();
            this.getProductSubscriptionProductCategorys();
            this.getProductSubscriptionProductModelNumbers();
            this.getProductSubscriptionAsins();
        },
        form_chooseCountry() {
            this.form.asinId = "";
            var countryId = this.form.countryId;
            var url =
                this.GLOBAL.productService +
                "/productSubscriptionUserRel/getProductCategoryByCountryId/" +
                countryId;
            this.$ajax.get(url, {}).then(res => {
                if (res.data.code == "200") {
                    var data = res.data.data;
                    this.formProductCategoryList = data;
                }
            });
        },
        form_chooseProductCategory() {
            this.form.asinId = "";
            var productCategory = this.form.productCategory;
            var countryId = this.form.countryId;
            if (countryId == null || countryId == "") {
                this.$message.error("请选择国家");
                return;
            }
            var url =
                this.GLOBAL.productService +
                "/productSubscriptionUserRel/getModelNumberByProductCategory/" +
                productCategory +
                "/" +
                countryId;
            this.$ajax.get(url, {}).then(res => {
                if (res.data.code == "200") {
                    var data = res.data.data;
                    this.formProductModelNumberList = data;
                }
            });
        },
        form_chooseProductModelNumber() {
            this.form.asinId = "";
            var productModelNumber = this.form.productModelNumber;
            var productCategory = this.form.productCategory;
            var countryId = this.form.countryId;
            if (countryId == null || countryId == "") {
                this.$message.error("请选择国家");
                return;
            }
            if (productCategory == null || productCategory == "") {
                this.$message.error("请选择产品系列");
                return;
            }
            var url =
                this.GLOBAL.productService +
                "/productSubscriptionUserRel/getAsinByProductModelNumber/" +
                productModelNumber +
                "/" +
                productCategory +
                "/" +
                countryId;
            this.$ajax.get(url, {}).then(res => {
                if (res.data.code == "200") {
                    var data = res.data.data;
                    this.formAsinList = data;
                }
            });
        },
        form_chooseAsin() {
            var asinId = this.form.asinId;

            var productModelNumber = this.form.productModelNumber;
            var productCategory = this.form.productCategory;
            var countryId = this.form.countryId;
            if (countryId == null || countryId == "") {
                this.$message.error("请选择国家");
                return;
            }
            if (productCategory == null || productCategory == "") {
                this.$message.error("请选择产品系列");
                return;
            }
            if (productModelNumber == null || productModelNumber == "") {
                this.$message.error("请选择产品型号");
                return;
            }
        },
        clearAddProductInfo() {
            this.form.productCategory = "";
            this.form.productModelNumber = "";
            this.form.asinId = "";
            this.form.countryId = "";
        },
        // 标题背景颜色
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return "background: #EBEEF5 ";
            } else {
                return "";
            }
        }
    }
};
</script>

<style lang="stylus" scoped>
.el-form-item {
    display: inline-block;
    margin-bottom: 10px;
}

.el-table {
    margin-top: 15px;

    .el-select {
        padding: 0;
    }
}
</style>